<template>
    <div class="bg-wrap" style="min-height: 765px;">
        <div class="sub-tit">
            <ul>
                <li class="selected">
                    <a href="/user/order-list.html">交易订单</a>
                </li>
            </ul>
        </div>
        <div class="table-wrap">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="ftable">
                <tbody>
                    <tr>
                        <th width="16%" align="left">订单号</th>
                        <th width="10%">姓名</th>
                        <th width="12%">订单金额</th>
                        <th width="11%">下单时间</th>
                        <th width="10%">状态</th>
                        <th width="12%">操作</th>
                    </tr>
                    <tr v-for="order in orderListdata.message" :key='order.id'>
                        <td>{{order.order_no}}</td>
                        <td align="left">{{order.accept_name}}</td>
                        <td align="left">
                            <strong style="color: red;">￥{{order.order_amount}}</strong>
                            <br> 在线支付
                        </td>
                        <td align="left">{{order.add_time | dataFmt('YYYY-MM-DD HH:mm:ss')}}</td>
                        <td align="left">
                            {{order.statusName}}
                        </td>
                        <td align="left">
                            <router-link :to="'/site/vipCenter/orderInfo/'+order.id" class="">查看订单</router-link>
                            <br>
                            <router-link v-if='order.status==1' :to="`/site/payOrder/`+order.id" class="">|去付款</router-link>
                            <br>
                            <a href="javascript:void(0)">|取消</a>
                            <br>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="page-foot">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="orderListdata.totalcount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                orderListdata: {},
                pageIndex: 1,
                pageSize: 10
            }
        },
        created() {
            this.getOrderList();
        },
        methods: {
            getOrderList() {
                const url = `site/validate/order/userorderlist?pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`;
                this.$axios.get(url).then(response => {
                    this.orderListdata = response.data;
                })
            },
            handleSizeChange(pageSize) {
                this.pageIndex = 1;
                this.pageSize = pageSize;
                this.getOrderList();
            },
            handleCurrentChange(pageIndex) {
                this.pageIndex = pageIndex;
                this.getOrderList();
            }
        }
    }
</script>